<!-- 通用组件库 -->

<template>
    <!-- 添加分类 -->
    <el-dialog v-model="dialogVisible" :title="title" :width="width" :draggable="true" :close-on-click-modal="false"
        :close-on-press-escape="false" :destroy-on-close="destroyOnClose" >
        <!-- <el-form ref="formRef" :rules="rules" :model="form">
            <el-form-item label="分类名" prop="name" label-width="100px">
                输入框组件
                <el-input size="large" v-model="form.name" placeholder="请输入分类名(1-16个字符范围内)" maxlength="16"
                    show-word-limit clearable />
            </el-form-item>
        </el-form> -->

        <slot></slot>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit" :loading="btnLoading">
                    {{ confirmText }}
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

const dialogVisible = ref(false)

// 打开
const open = () => dialogVisible.value = true
// 关闭
const close = () => dialogVisible.value = false

//显示分类提交按钮loading
const btnLoading = ref(false)
const showBtnLoading = () => btnLoading.value = true
const closeBtnLoading = () => btnLoading.value = false

// 暴露给父组件
defineExpose({
    open,
    close,
    showBtnLoading,
    closeBtnLoading
})

// 对外暴露属性
const props = defineProps({
    title: String, // 字段类型
    width: {
        type: String, 
        default: '40%' // 默认值
    },
    destroyOnClose:  {
        type: Boolean,
        default: false
    },
    confirmText: {
        type: String,
        default: '提交'
    }
})

// 对外暴露一个 submit 方法
const emit  = defineEmits(['submit'])
const submit = () => emit('submit')

</script>
